<template>
  <div class="help-canvas-wrapper">
    <canvas id="canvas"></canvas>
    <div class="tooltip-wrapper">
      <div
        v-for="(element, index) in helpData.elementList"
        :key="index"
        :style="getSafeToolTipPosition(element)"
        class="desc"
      >
        {{ element.elementDesc }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelpCanvas",
  props: {
    helpData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      ctx: null,
      canvas: null,
    };
  },
  computed: {
    containerWidth() {
      return this.canvas.parentElement.clientWidth;
    },
    containerHeight() {
      return this.canvas.parentElement.clientHeight;
    },
  },
  methods: {
    initCanvas() {
      const canvas = document.getElementById("canvas");
      this.canvas = canvas;

      canvas.width = this.containerWidth;
      canvas.height = this.containerHeight;

      const ctx = canvas.getContext("2d");
      this.ctx = ctx;

      ctx.beginPath();
      ctx.fillStyle = "rgba(0,0,0,0.5)";

      //逆时针镂空提示
      this.helpData.elementList?.forEach((element) => {
        this.drawCutOut(element);
      });

      // 画遮罩
      ctx.rect(0, 0, this.containerWidth, this.containerHeight);

      ctx.fill();
    },
    drawCutOut(element) {
      const { width, height, top, left } = element;

      // 计算形状的四个角的坐标
      const x1 = parseFloat(left) * 0.01 * this.containerWidth;
      const x2 = x1 + parseFloat(width) * 0.01 * this.containerWidth;
      const y1 = parseFloat(top) * 0.01 * this.containerHeight;
      const y2 = y1 + parseFloat(height) * 0.01 * this.containerHeight;

      this.ctx.moveTo(x1, y1);
      this.ctx.lineTo(x1, y2);
      this.ctx.lineTo(x2, y2);
      this.ctx.lineTo(x2, y1);
    },
    getSafeToolTipPosition(element) {
      // 获取元素的原始位置
      const originalPosition = this.getToolTipPosition(element);

      // 获取窗口的宽度和高度
      const windowWidth = window.innerWidth;
      const windowHeight = window.innerHeight;

      // 计算元素的实际位置
      const elementLeft =
        (windowWidth * parseFloat(originalPosition.left)) / 100;
      const elementTop =
        (windowHeight * parseFloat(originalPosition.top)) / 100;

      // 元素的宽度和高度
      const elementWidth = 200;
      const elementHeight = 200;

      // 计算元素的右侧和底部边界
      const elementRight = elementLeft + elementWidth;
      const elementBottom = elementTop + elementHeight;

      // 如果元素的右侧超出窗口宽度
      if (elementRight > windowWidth || elementBottom > windowHeight) {
        originalPosition.left = "auto";
      } else {
        originalPosition.right = "auto";
      }

      // 如果元素的底部超出窗口高度
      if (elementBottom > windowHeight) {
        originalPosition.top = "auto";
      } else {
        originalPosition.bottom = "auto";
      }

      return originalPosition;
    },
    getToolTipPosition(element) {
      return {
        top: element.top,
        left: parseFloat(element.left) + parseFloat(element.width) + 1 + "%",
        right: parseFloat(element.width) + 1 + "%",
        bottom: parseFloat(element.height) + 1 + "%",
      };
    },
  },
  mounted() {
    this.initCanvas();
  },
};
</script>

<style lang="scss" scoped>
.help-canvas-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  .tooltip-wrapper {
    .desc {
      position: absolute;
      background: #ffffff57;
      padding: 12px 10px;
      color: #fff;
      font-size: 14px;
      border-radius: 5px;
      width: 200px;
      max-height: 200px;
    }
  }
}
</style>
